<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <!-- 1. 字符编码标签：指定文档使用UTF-8编码，确保中文等多语言字符无乱码 -->
    <meta charset="UTF-8">

    <!-- 2. 视口标签：响应式设计核心，使页面宽度适配设备屏幕，初始缩放比例1.0（无缩放） -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- 3. 页面描述标签：提供网页核心内容简介，用于搜索引擎结果展示，提升点击率 -->
    <meta name="description" content="HTML元数据标签实验页面，展示字符编码、视口、SEO相关元数据的应用">

    <!-- 4. 关键词标签：指定网页核心主题词，辅助搜索引擎识别内容分类（现代SEO权重降低，但仍有参考价值） -->
    <meta name="keywords" content="HTML元数据, meta标签, 视口设置, SEO优化">

    <!-- 5. 作者标签：标识文档创作者，便于版权管理和内容归属追溯 -->
    <meta name="author" content="实验开发者">

    <!-- 6. 搜索引擎爬虫指令：允许爬虫索引当前页面（index）并跟随页面内链接（follow） -->
    <meta name="robots" content="index, follow">

    <!-- 7. 浏览器渲染模式：针对IE浏览器，强制使用最新渲染引擎，避免兼容模式导致的样式错乱 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <!-- 8. Open Graph标签（社交媒体优化）：Facebook等平台分享时显示的标题，确保内容展示一致性 -->
    <meta property="og:title" content="HTML元数据标签实验">

    <!-- 9. Open Graph标签：指定分享内容类型为“文章”，帮助平台识别内容属性 -->
    <meta property="og:type" content="article">

    <!-- 10. Twitter卡片标签：Twitter分享时使用“大图卡片”样式，提升分享内容视觉效果 -->
    <meta name="twitter:card" content="summary_large_image">

    <!-- 文档标题：显示在浏览器标签栏，也是搜索引擎结果的核心标题 -->
    <title>HTML元数据标签实验</title>
</head>
<body>
    <h1>HTML元数据标签实验页面</h1>
    <p>本页面元数据位于&lt;head&gt;标签内，右键“查看页面源代码”可查看完整标签。</p>
</body>
</html>